<template>
	<view ref="calendarView" class="calendar" :style="{ 'pointer-events': isPrevMonthDisabled ? 'none' : 'auto' }"
		style="overflow: auto;">
		<view style="height: 20rpx;"></view>
		<view class="card">
			<view class="card-content">
				<view class="image-container">
					<image class="imagg"
						:src="'http://101.43.223.224:8765/image/getImageById?id=' + item.memberUserPhoto"></image>
				</view>
				<view class="details">
					<view class="details-row">
						<view class="label"><uni-icons type="person"
								size="25"></uni-icons>学员姓名：{{item.memberUserRealName}}</view>
					</view>
					<view class="details-row">
						<view class="label"><uni-icons type="phone" size="25"></uni-icons>联系方式：{{item.memberUserPhone}}
						</view>
					</view>
					<view class="details-row">
						<view class="label"><uni-icons type="calendar" size="25"></uni-icons>课程进度：{{item.schedule}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view
			style="width: 90%;margin: 0 auto;display: flex;align-items: center;margin-bottom: 20rpx;justify-content: center;">
			<!-- justify-content: center; -->
			<u-icon name="calendar" size="60rpx" color="#000000"></u-icon>
			<text style="font-size: 32rpx;">选择日期</text>
		</view>
		<view class="calendar">
			<view class="calendar-header">
				<view class="calendar-prev" @click="prevMonth"
					:style="{ 'pointer-events': currentMonth === month ? 'none' : 'auto' }">上个月</view>
				<!-- v-if="isNotCurrentMonth" -->
				<view class="calendar-title">{{ year }}年{{ month }}月</view>
				<view class="calendar-next" @click="nextMonth">下个月</view>
			</view>
			<view class="calendar-body">
				<view class="calendar-weekdays">
					<view class="calendar-weekday" v-for="(weekday, index) in weekdays" :key="index">
						{{ weekday }}
					</view>
				</view>
				<view class="calendar-dates">
					<view v-if="date==null" v-for="(date, index) in dates" :key="index" class="calendar-date">

					</view>
					<view v-if="date!=null&&date.status==1" class="calendar-date1" v-for="(date, index) in dates"
						:key="index">
						{{ date.day || '' }}
					</view>
					<view v-if="date!=null&&date.status==0" class="calendar-date" v-for="(date, index) in dates"
						:key="index" :class="{ 'calendar-date-selected': isSelected(date) }" @click="selectDate(date)">
						<text v-if="date.isFull==0">{{ date.day || '' }}</text>
						<text v-if="date.isFull==1" class="full">满</text>
					</view>

				</view>
			</view>
		</view>
		<view
			style="width: 90%;margin: 0 auto;display: flex;align-items: center;margin-bottom: 20rpx;margin-top: 40rpx;justify-content: center;">
			<!-- justify-content: center; -->
			<u-icon name="clock" size="50rpx" color="#000000"></u-icon>
			<text style="font-size: 32rpx;">选择时间</text>
		</view>
		<view style="overflow: inherit;">
			<view v-for="item in dateData">
				<view class="time-bottom" :class="{ 'time-bottom-selected': timeSelected(item) }"
					@click="selectTime(item)" v-if="item.courseId<1">
					<view
						style="display: flex;align-items: center;justify-content: center;font-weight: 600;margin-bottom: 5px;margin-top: 25rpx;" >
						{{item.trainingTime}}
					</view>
					<view style="display: flex;align-items: center;justify-content: center;font-size: 26rpx;">
						<!-- <text style="color: #F03737;" v-if="i.isclick==1" class="yueman">约满</text> -->
						<!-- <text class="keyue">可约</text> -->
					</view>
				</view>
				<view class="time-bottom-1" v-if="item.courseId>0" @click="statuspanduan(item)">
					<view style="display: flex;align-items: center;justify-content: center;font-weight: 600;margin-bottom: 5px;">
						{{item.trainingTime}}
					</view>
					<view style="display: flex;align-items: center;justify-content: center;font-size: 26rpx;">
						<text class="yueman">约满</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="selectedTime.trainingTime">
			<view style="align-items: center;justify-content: center;margin:2px;font-size: 26rpx; margin-left: 130rpx;">
				预约时间:<span style="text-indent: 5px;">{{selectedDate}}</span><span
					style="margin-left: 10rpx;"></span><span
					style="text-indent: 5px;">{{selectedTime.trainingTime}}</span>
			</view>
			<view @click="reservationPlan()"
				style="width: 200px;height: 40px;background-color: #6EE7F0;margin: 0 auto;border-radius: 5px;display: flex;align-items: center;justify-content: center;">
				<text style="letter-spacing: 5px;font-size: 34rpx;color: #fff;">申请预约</text>
			</view>
		</view>
		<u-popup style="border-radius: 25rpx 25rpx 25rpx 25rpx;" :show="show" mode="center" @close="close" @open="open"
			closeable="true" :safeAreaInsetBottom="false">
			<view class="card" style="margin-top:30px">
				<view class="card-content">
					<view class="image-container">
						<image class="imagg"
							:src="'http://101.43.223.224:8765/image/getImageById?id=' + reservationInfo.memberUserPhoto">
						</image>
					</view>
					<view class="details">
						<view class="details-row">
							<view class="label">预约时间：<span>{{reservationInfo.reservationTime}}</span><span
									style="margin-left:4px;">{{reservationInfo.trainingTime}}</span></view>
						</view>
						<view class="details-row">
							<view class="label">课程名称：{{reservationInfo.fitnessPlanName}}</view>
						</view>
						<view class="details-row">
							<view class="label">学员姓名：{{reservationInfo.memberUserRealName}}</view>
						</view>
						<view class="details-row">
							<view class="label">教练姓名：{{reservationInfo.coachName}}</view>
						</view>
					</view>
				</view>
			</view>
			<view
				style="width: 90%;height:40px;background-color:#C7FBFF;border-radius: 5px;display: flex;align-items: center;justify-content: center;color: #fff;margin: 0 auto;margin-bottom:10px;"
				@click="cancelReservation()" v-if="status != 2">
				取消预约
			</view>
		</u-popup>
		<view style="height: 40px;"></view>
	</view>

</template>

<script>
	export default {
		name: "calendar",
		data() {
			return {
				currentMonth: new Date().getMonth() + 1, // 获取当前月份，这里假设月份从1开始
				selectedMonth: new Date().getMonth() + 1,
				item: {},
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				weekdays: ["一", "二", "三", "四", "五", "六", "日"],
				selectedDate: null,
				dateData: [],
				isPrevMonthDisabled: false,
				selectedTime: {},
				show: false,
				reservationInfo: {},
				canNavigate: true,
				status: 0,

			};
		},
		onLoad(option) {
			this.item = JSON.parse(option.item) //打印出上个页面传递的参数。
			console.log("上个页面传递的参数",this.item)
			this.getToday()
			this.getReservationTime()
		},
		computed: {
			// isNotCurrentMonth() {
			// 	if(this.selectedMonth !== this.currentMonth){
			// 		return true;
			// 	}else{
			// 		return false;
			// 	}
			// },
			dates() {
				const today = new Date();
				const firstDayOfMonth = new Date(this.year, this.month - 1, 1);
				const lastDayOfMonth = new Date(this.year, this.month, 0);
				const todayyear = today.getFullYear();
				const todaymonth = today.getMonth() + 1;
				const todayday = today.getDate();
				const dates = [];
				for (let i = firstDayOfMonth.getDate(); i <= lastDayOfMonth.getDate(); i++) {
					const date = new Date(this.year, this.month - 1, i);
					const year = date.getFullYear();
					const month = date.getMonth() + 1;
					const day = date.getDate();
					const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
					var isFull = 0
					for (let a = 0; a < this.dateData.length; a++) {
						if (this.dateData[a].time == formattedDate) {
							let allIsclickZero = true;
							for (let b = 0; b < this.dateData[a].tarin.length; b++) {
								if (this.dateData[a].tarin[b].isclick == 0) {
									allIsclickZero = false;
									break;
								}
							}
							if (allIsclickZero == true) {
								isFull = 1
							}
						}
					}
					if (todayyear > year - 1 && todaymonth > month - 1 && todayday > day) {
						dates.push({
							datee: date,
							date: formattedDate,
							day: day,
							status: 1,
							isFull: isFull
						});
					} else {
						dates.push({
							datee: date,
							date: formattedDate,
							day: day,
							status: 0,
							isFull: isFull
						});
					}
				}

				for (let i = 1; i < firstDayOfMonth.getDay(); i++) {
					dates.unshift(null);
				}
				return dates;
			}


		},
		methods: {
			open() {

			},
			close() {
				this.show = false
			},
			statuspanduan(item) {
				var ths = this
				uni.request({
					url: ths.URL + 'vipPlan/selectResStatus',
					method: 'GET',
					data: {
						courseId: item.courseId,
						studentId: item.studentId,
						coachId: item.coachId
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.data.data.reservationStatus == 2) {
							ths.status = 2
							ths.openInfo(item)
						} else {
							ths.status = 0
							ths.openInfo(item)
						}
						if (ths.item.memberId == item.studentId) {
							if (ths.item.id == item.courseId) {
								if (ths.item.coachId == item.coachId) {
									ths.openInfo(item)
									ths.status = 2
								}
							}
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			openInfo(item) {
				var ths = this
				uni.request({
					url: this.URL + 'vipPlan/selectReservationById',
					method: 'GET',
					data: {
						courseId: item.courseId
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.reservationInfo = res.data.data
						} else {

						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
				ths.show = true
			},
			cancelReservation() {
				var ths = this;
				uni.showModal({
					title: "预约提示",
					content: "您确定取消" + "  " + ths.reservationInfo.memberUserRealName + "  " + "学员的训练吗",
					showCancel: true,
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: this.URL + 'vipPlan/cancelReservation',
								method: 'GET',
								data: {
									courseId: ths.reservationInfo.id,
									studentId: ths.reservationInfo.memberId,
								},
								// userInfo:res.
								success: function(res) {
									if (res.data.code == 200) {
										ths.show = false
										ths.getToday()
										ths.getReservationTime()
									} else {

									}
								},
								fail: function(error) {
									// 处理请求失败
									console.error('角色查询失败,请检查网络');
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}


					}
				});
			},
			reservationPlan() {
				var ths = this;
				uni.showModal({
					title: "预约提示",
					content: "您确定预约" + "  " + ths.selectedDate + "  " + ths.selectedTime.trainingTime + "  " +
						"时间段的训练吗",
					showCancel: true,
					confirmText: "确定",
					success: (res) => {
						console.log(ths.item)
						console.log(ths.selectedTime)
						if (res.confirm) {
							uni.request({
								url: this.URL + 'vipPlan/reservationPlan',
								method: 'POST',
								data: {
									coachId: ths.item.coachId,
									courseId: ths.item.id,
									studentId: ths.item.memberId,
									reservationTime: ths.selectedDate,
									courseTime: ths.selectedTime.id
								},
								// userInfo:res.
								success: function(res) {
									if (res.data.code == 200) {
										uni.reLaunch({
											url: '/pages/coach/home/anpai'
										})
									} else {

									}
								},
								fail: function(error) {
									// 处理请求失败
									console.error('角色查询失败,请检查网络');
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}


					}
				});
			},
			getReservationTime() {
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/selectReservationTime',
					method: 'GET',
					data: {
						coachId: ths.item.coachId,
						reservationTime: ths.selectedDate
					},
					// userInfo:res.
					success: function(res) {
						if (res.data.code == 200) {
							ths.dateData = res.data.data;
						} else {
							ths.dateData = []
						}


					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			getToday() {
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth() + 1;
				const day = today.getDate();
				const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
				this.selectedDate = formattedDate
			},
			prevMonth() {
				const today = new Date();
				const todayYear = today.getFullYear();
				const todayMonth = today.getMonth() + 1;

				// 如果当前月份为当月，不执行减月份的操作
				if (this.year === todayYear && this.month === todayMonth) {
					return;
				}

				if (this.month === 1) {
					this.year -= 1;
					this.month = 12;
				} else {
					this.month -= 1;
				}

				// 重新计算当前月份
				this.currentMonth = new Date().getMonth() + 1;
			},
			nextMonth() {
				if (this.canNavigate) {
					if (this.month === 12) {
						this.year += 1;
						this.month = 1;
					} else {
						this.month += 1;
					}

					this.updateNavigationState();
				}
			},
			updateNavigationState() {
				const today = new Date();
				const todayYear = today.getFullYear();
				const todayMonth = today.getMonth() + 1;

				this.canNavigate = !(this.year === todayYear && this.month === todayMonth);
			},

			timeSelected(item) {
				return (item === this.selectedTime)
			},
			selectTime(item) {
				if (item.courseId < 1) {
					this.selectedTime = item;

				}

			},
			isSelected(date) {
				if (date == null) {
					return
				}
				return this.selectedDate && this.selectedDate === date.date;
			},
			selectDate(date) {
				if (date == null) {
					return;
				}

				const today = new Date();
				today.setHours(0, 0, 0, 0);

				if (today.getTime() > date.datee.getTime()) {
					// 弹出提示窗口
					uni.showModal({
						title: '提示',
						content: '请预约今天之后的日期',
						showCancel: false
					});
				} else {
					// 处理选中日期的逻辑
					this.selectedDate = date.date;
					this.getReservationTime();
					this.$emit("select", new Date(this.year, this.month - 1, date.day));
				}
			},

			isPastDate(date) {
				const today = new Date();
				today.setHours(0, 0, 0, 0);
				const selectedDate = new Date(date.datee);

				return today.toDateString() > selectedDate.toDateString();
			}
		},
	};
</script>

<style scoped>
	.calendar {
		border-radius: 4px;
		font-size: 14px;
		background: #fff;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20px;
		box-shadow: 0 2px 10px #dfdfdf;
	}

	.calendar-header {
		display: flex;
		justify-content: space-between;
		padding: 8px;
		font-weight: 600;
	}

	.calendar-title {
		text-align: center;
		flex: 1;
	}

	.calendar-prev,
	.calendar-next {
		cursor: pointer;
	}

	.calendar-body {
		display: flex;
		flex-direction: column;
	}

	.calendar-weekdays {
		display: flex;
	}

	.calendar-weekday {
		width: calc(100% / 7);
		padding: 8px;
		text-align: center;
	}

	.calendar-dates {
		display: flex;
		flex-wrap: wrap;
	}

	.calendar-date {
		width: calc(100% / 7);
		box-sizing: border-box;
		padding: 8px;
		text-align: center;
		cursor: pointer;
	}

	.calendar-date .full {
		color: #F03737;
	}

	.calendar-date1 {
		width: calc(100% / 7);
		box-sizing: border-box;
		padding: 8px;
		text-align: center;
		cursor: pointer;
		color: #b3b3b3;
	}

	.calendar-date-today {
		color: blue;
		font-weight: 600;
	}

	.calendar-date-selected {
		background-color: #6EE7F0;
		color: rgb(255, 255, 255);
		border-radius: 75rpx 75rpx 75rpx 75rpx;
	}

	.calendar-date-selected .full {
		color: white;
	}

	.card {
		width: 90vw;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 10px #dfdfdf;
		margin-bottom: 24px;
	}

	.card-header {
		height: 50rpx;
	}

	.icon-container {
		float: left;
	}

	.title {
		float: left;
	}

	.time {
		float: right;
		color: #5C5C5C;
		font-size: 25rpx;
		margin-top: 5rpx;
	}

	.card-content {
		width: 85vw;
		margin: 0 auto;
		height: 180rpx;
		padding: 5px;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	.card-content2 {
		width: 100%;
		background-color: #F7F7F7;
		margin: 0 auto;
		height: 120rpx;
		padding: 5px;
		box-sizing: border-box;
		margin-top: 10rpx;
		color: #5C5C5C;
	}

	.image-container {
		width: 160rpx;
		height: 160rpx;
		float: left;
	}

	.imagg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 4px;
		margin-top: 20rpx;
		border-radius: 50%;
	}

	.details {
		font-size: 26rpx;
		float: left;
		color: #5C5C5C;
	}

	.details-row {
		height: 30rpx;
		margin-top: 20rpx;
	}

	.label {
		float: left;
	}

	.label-top {
		float: left;
		font-size: 36rpx;
		color: black;
		margin-bottom: 10rpx;
	}

	.time-bottom {
		width: 31%;
		height: 60px;
		float: left;
		margin: 1%;
		box-sizing: border-box;
		padding: 8px;
		box-shadow: 0 2px 10px #dfdfdf;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
	}

	.time-bottom .keyue {
		color: rgb(60, 156, 255);
	}

	.time-bottom-selected {
		width: 31%;
		height: 60px;
		float: left;
		margin: 1%;
		box-sizing: border-box;
		padding: 8px;
		background-color: #C7FBFF;
		color: black;
		box-shadow: 0 2px 10px #dfdfdf;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
	}

	.time-bottom-selected .keyue {
		color: #000;
	}

	.time-bottom-1 {
		width: 31%;
		height: 60px;
		float: left;
		margin: 1%;
		box-sizing: border-box;
		padding: 8px;
		box-shadow: 0 2px 10px #dfdfdf;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		background-color: #F79B9B;
	}

	.time-bottom-1 .yueman {
		color: #F03737;
	}
</style>